import {useCallback} from "react";
import useState from "../../hooks/useState";

import styles from "./index.module.less";
import "./index.less";

console.log("styles", styles)

function CounterNew(props) {
  const [count, setCount] = useState(0);
  const [words, setWords] = useState('hellWorld ');
  const [newCount, setNewCount] = useState('1 ');
  console.log("重新渲染", count)

  const increase = useCallback(() => {
    setCount(prev => prev + 1);
  }, [])

  const decrease = useCallback(() => {
    setCount(prev => prev - 1);
  }, [])

  const changeWords = useCallback(() => {
    setWords(Math.random())
  }, [])
  const changeCount = useCallback(() => {
    setNewCount(Math.random())
  }, [])

  return (
    <div className="wrapper">
      <span>count: {count}</span>
      <button onClick={increase}>add Count</button>
      <button onClick={decrease}>del Count</button>
      <span>words: {words}</span>
      <button onClick={changeWords}>changeWords</button>
      <span>newCount: {newCount}</span>
      <button onClick={changeCount}>change new Count</button>

    </div>
  )
}

export default CounterNew;